<template>
  <section class="container">
    <div class="post-list-page">
      <div class="post-list" v-for="(item, index) in articleData" :key="index">
        <div class="poster" :style="'background-image: url('+ item.cover +')'" v-if="item.cover.length"></div>
        <div class="content">
          <a :href="'/web/detail?id=' + item._id " class="title">
            {{item.title}}
          </a>
          <div class="desc">
            {{item.desc}}
          </div>
          <div class="info">
            <i class="iconfont icon-shijian"></i>
            <p>{{item.createTime | FDateTime('YYYY-MM-DD')}}</p>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="page-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          @current-change="currentChange"
          :current-page="nowPage">
        </el-pagination>
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8083/api'

export default {
  async asyncData ({params}) {
    const data = await axios.get('/article/web/query', {
      params: {
        limit: 10,
        pageNo: params.id
      }
    })
    return {
      articleData: data.data.result,
      count: data.data.count,
      nowPage: Number(params.id)
    }
  },
  head () {
    return {
      title: '前端摆渡人-首页'
    }
  },
  methods: {
    currentChange (pageNo) {
      window.location.href = `/${pageNo}`
    }
  }
}
</script>

<style lang="scss">
.container {
  width: 1200px;
  margin: 50px auto;
  box-shadow: 0 0 6px #888888;
  .post-list-page {
    background: #fff;
    padding: 40px 30px;
    min-height: 100%;
    position: relative;
    .post-list {
      padding: 20px;
      margin-bottom: 30px;
      box-shadow: 0 0 6px #888888;
      display: flex;
      .poster {
        background: rgba(50, 50, 93, .15) no-repeat center / cover;
        width: 260px;
        height: 180px;
        margin-right: 10px;
        flex-shrink: 0;
      }
      .content {
        position: relative;
        padding-bottom: 25px;
        flex: 1;
        .title {
          font-size: 18px;
          line-height: 1.5;
          color: #3084bb;
        }
        .desc {
          width: 100%;
          font-size: 14px;
          line-height: 1.5;
          color: #555;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
        }
        .info {
          display: flex;
          align-content: center;
          color: #999;
          position: absolute;
          left: 0;
          bottom: 0;
          i {
            font-size: 13px;
            display: inline-block;
            margin-top: 2px;
          }
          P {
            margin: 0 10px 0 5px;
            font-size: 13px;
          }
        }
      }
    }
    .page-container {
      position: absolute;
      width: 100%;
      bottom: 20px;
      text-align: center;
    }
  }
}
</style>

